<template>
  <div class="container">
    <el-row>
      <el-col :span="9">
        <el-input
          size="small"
          placeholder="用户名/手机号"
          v-model="searchStr"
          class="input-with-select"
        >
          <el-button
            @click="search"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
      border
      stripe
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          <div v-if="scope.row.user">
            {{ scope.row.user.nickname }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="绑定手机号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="公司名称" width="150">
      </el-table-column>
      <el-table-column prop="company_addr" label="公司名称" width="150">
      </el-table-column>
      <el-table-column label="申请时间">
        <template slot-scope="scope">
          {{ scope.row.created_at.date.split(".")[0] }}
        </template>
      </el-table-column>
      <el-table-column label="营业执照" width="120">
        <template slot-scope="scope">
          <img
            @click="imgPreview(scope.row.img)"
            style="width:120px; height:50px;object-fit:cover;"
            :src="scope.row.img"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div :class="{ red: scope.row.is_audit === 0 }">
            {{ getType(scope.row.is_audit) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.is_audit === 0" style="width:150px">
            <div style="margin-bottom:10px;">
              <el-button
                style="width:45%"
                @click="vipApplyEdit(scope.row.id, scope.$index, -1)"
                type="primary"
                size="small"
                >驳回</el-button
              >
              <el-button
                style="width:45%"
                @click="vipApplyEdit(scope.row.id, scope.$index, -2)"
                type="danger"
                size="small"
                >禁止</el-button
              >
            </div>
            <el-button
              style="width:100%;"
              @click="vipApplyEdit(scope.row.id, scope.$index, 1)"
              type="success"
              size="small"
              >通过</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-bottom-bar">
      <div></div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getVipApplyList, userBan, vipApplyEdit } from "@/api/user-mng";
export default {
  name: "OrdinaryUser",
  data() {
    return {
      list: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      editVisible: false,
      currentUser: {},
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  watch: {},
  methods: {
    imgPreview(img) {
      this.dialogImageUrl = img;
      this.dialogVisible = true;
    },
    getType(type1) {
      let type = "待审核";
      switch (type1) {
        case 0:
          type = "待审核";
          break;
        case 1:
          type = "已通过";
          break;
        case -1:
          type = "未通过";
          break;
        case -2:
          type = "已禁止";
          break;
      }
      return type;
    },
    search() {
      this.getUserList(1);
    },
    vipApplyEdit(id, index, ban) {
      vipApplyEdit({ id, freeze: ban }).then(res => {
        if (res.code === 200) {
          this.list[index].is_audit = ban;
        }
      });
    },
    getUserList(page) {
      getVipApplyList({
        page
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getUserList(page, this.tabName);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getUserList(1);
    this.changeSize();
  },
  components: {}
};
</script>

<style scoped>
.red {
  color: red;
}
</style>
